import type { ComponentsConfig, ComponentsConfigRaw } from '../../types'
import { extendSchemas } from '@/components/cms/utils'
import advsConfig from './base/advs'
import { videoAnthology, guessYouLike, bottomFunction } from './simples'

const basePath = 'template.videoPlayer'

const config: ComponentsConfig = {
  default: 'videoAnthology',
  components: extendSchemas<ComponentsConfigRaw>(
    {
      videoAnthology: videoAnthology({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          style: `${basePath}.content.parts.style`,
          selectedBorderColor: `${basePath}.content.parts.selectedBorderColor`,
          selectedBackground: `${basePath}.content.parts.selectedBackground`,
          selectTextColor: `${basePath}.content.parts.selectTextColor`,
          radius: `${basePath}.content.parts.radius`
        }
      }),
      guessYouLike: guessYouLike({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          background: `${basePath}.content.videoGrid.background`,
          title: {
            color: `${basePath}.content.videoGrid.title.color`,
            size: `${basePath}.content.videoGrid.title.size`,
            letterSpacing: `${basePath}.content.videoGrid.title.letterSpacing`,
            lineHeight: `${basePath}.content.videoGrid.title.lineHeight`
          },
          layout: {
            style: `${basePath}.content.videoGrid.layout.style`,
            limit: `${basePath}.content.videoGrid.layout.limit`
          }
        }
      }),
      bottomFunction: bottomFunction({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          style: `${basePath}.content.footerBar.style`,
          background: `${basePath}.content.footerBar.background`
        }
      })
    },
    advsConfig(['playerBeforeAdv', 'playerPauseAdv'])
  )
}
export default config
